<template>
    <div class="reportUser">
        <div class='moduleHead'>
            <span class="back" @click="goBack"></span>
            <span>{{language.reportUser_title}}</span>
        </div>
        <div class="body">
            <div class="username_box">
                {{language.unify_username}}: <span>{{userName}}</span>
            </div>
            <div class="line_title">
                {{language.reportUser_selectAReason}}
            </div>
            <div class="select_box">
                <ul>
                    <li :class="{selected : type == 1 ? true : false}" @click="type = 1">{{language.reportUser_fraudulentAccount}}</li>
                    <li :class="{selected : type == 3 ? true : false}" @click="type = 3">{{language.reportUser_abusiveBehavior}}</li>
                    <li :class="{selected : type == 10 ? true : false}" @click="type = 10">{{language.unify_other}}</li>
                </ul>
            </div>
            <div class="textarea_box">
                <h3>{{language.reportUser_textareaTitle}}</h3>
                <textarea v-model="text" :placeholder="language.reportUser_textareaPal" rows="7"></textarea>
                <div class="upload_photo">
                    {{language.reportUser_uploadPhotoNote}}
                    <span v-show="!photoObj">
                        <input @change="updatePhoto" accept="image/*" type="file">
                        {{language.unify_uploadIt}}
                    </span>
                </div>
                <div class="files_photo" v-show="photoObj">
                    <img :src="photoData" alt="">
                    <i class="clear_photo" @click="clearPhoto"></i>
                </div>
            </div>
            <div class="submit_box">
                <button class="btn" :class="{opacity: !type}" @click="report">
                    <loading :props="{show:loading,type:'btn'}"></loading>
                    {{language.unify_report}}
                </button>
            </div>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api'
import publicDialog from './PublicDialog'
import loading from './Loading'

export default {

    name: 'reportUser',

    components: {
        publicDialog,
        loading,
    },

    data() {
        return {
            photoObj: '',
            photoData: '',
            type: '',
            text: '',
            loading: false,
            userName: '',
            userId: '',
            dialogData: {}
        }
    },

    activated() {
        this.userName = this.$route.query.userName;
        this.userId = this.$route.query.userId;
    },

    methods: {

        clearPhoto() {
            this.photoObj = '';
            this.photoData = '';
        },

        updatePhoto(e) {
            let tthis = this,
                reader;
            this.photoObj = e.target.files[0];
            if (this.photoObj) {
                reader = new FileReader();
                reader.readAsDataURL(this.photoObj);
                reader.onload = function(e) {
                    if (this.result.indexOf('image') < 0) {
                        alert('Invalid format');
                    } else {
                        tthis.photoData = this.result;
                    }
                }
            }
        },

        report() {
            if (!this.type || this.loading == true) {
                return;
            }
            let tthis = this,
                data = new FormData();
            data.append('prof_id', this.userId);
            data.append('type', this.type);
            data.append('text', this.text);
            if (this.photoObj) {
                data.append('file0', this.photoObj);
            }
            tthis.loading = true;
            API.report({
                data: data,
                format: true,
                success: function(result) {
                    tthis.dialogData = {
                        position: 'top',
                        type: 'successful',
                        content: {
                            info: tthis.language.reportUser_successTips
                        }
                    };
                    tthis.init();
                    setTimeout(function() {
                        tthis.$router.go(-1);
                    }, 3000)

                },
                complete: function() {
                    tthis.loading = false;
                }
            })
        },

        goBack() {
            this.init();
            this.$router.go(-1);
        },

        init() {
            this.clearPhoto();
            this.loading = false;
            this.type = '';
            this.text = '';
        }
    }
}

</script>
<style scoped>
.reportUser {
    padding-top: 44px;
    background-color: #f5f7f8;
}

.reportUser .body {
    font-size: 15px;
}

.reportUser .username_box,
.reportUser .select_box {
    padding: 0 20px;
    line-height: 44px;
    color: #818181;
    background: #fff;
}

.reportUser .username_box span {
    color: #333;
}

.reportUser .line_title {
    padding: 0 20px;
    line-height: 40px;
    color: #818181;
}

.reportUser .select_box li {
    border-bottom: 1px dashed #ccc;
}

.reportUser .select_box li.selected {
    background: url(../assets/ico_selectedA.png) no-repeat center right;
    background-size: 22px;
}

.reportUser .select_box li:last-child {
    border-bottom: 0;
}

.reportUser .textarea_box {
    font-size: 14px;
    margin-top: 20px;
    padding: 0 20px 10px 20px;
    color: #818181;
    background: #fff;
}

.reportUser .textarea_box h3 {
    padding-top: 6px;
    font-size: 15px;
    font-weight: normal;
    line-height: 32px;
}

.reportUser .textarea_box textarea {
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 6px;
    font-size: 14px;
}

.reportUser .textarea_box .upload_photo {
    position: relative;
    margin: 8px 0;
}

.reportUser .textarea_box .upload_photo input[type='file'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: red;
}

.reportUser .textarea_box .upload_photo span {
    color: #2ac13b;
}

.reportUser .textarea_box .files_photo {
    position: relative;
    display: inline-block;
}

.reportUser .textarea_box .files_photo img {
    max-width: 80px;
    max-height: 80px;
}

.reportUser .textarea_box .files_photo .clear_photo {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 30px;
    height: 30px;
    background: url(./../assets/icoClose2.png) center no-repeat;
    background-size: 16px;
}

.reportUser .submit_box {
    padding: 0 20px;
    /*background: #fff;*/
    padding: 20px;
}

.reportUser .opacity {
    background: #a5a5a5;
}

</style>
